<template>
  <div class="recommend" >
    <div class="recommend2"  ref="wrapperlistcity">
      <div class="recommend-content">
        <div class="loading-container" v-show="!recommends.length">
          <loading></loading>
        </div>
        <div class="slider-wrapper">
          <!--  swiper他自己写的那个插件太垃圾了 -->
          <swiper :options="swiperOptionimg" v-if="recommends.length" >
            <!-- slides -->
            <swiper-slide v-for="(item,index) of recommends" :key="index">
              <a :href="item.linkUrl">
                <img class="needsclick swipe-img" @load="loadImage" :src="item.picUrl">
              </a>
            </swiper-slide>
            <!-- Optional controls 专门用来显示轮播的页码的-->
            <!-- 这是一个具名插槽  -->
            <div class="swiper-pagination"  slot="pagination">
            </div>
          </swiper>
          <!--  这里加if,是因为slider里面调用了钩子，数据万一没加载就是白搭 -->
        </div>
        <div class="recommend-list" >
          <h1 class="list-title">热门歌单推荐</h1>
          <div class="loading-container" v-show="!discList.length">
            <loading></loading>
          </div>
          <ul  v-if="discList.length" >
            <!--@click="selectItem(item)"-->
            <li  v-for="item in discList" class="item">
              <div class="icon">
                <!--  懒加载，使用很方便  -->
                <img width="60" height="60" v-lazy="item.imgurl">
              </div>
              <div class="text">
                <h2 class="name" v-html="item.creator.name">x</h2>
                <p class="desc" v-html="item.dissname"></p>
              </div>
            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
 /*  这是自己写的轮播图组件，本质还是利用插槽进行制作的 */
 /*  里面使用bettscroll */
 //   https://blog.csdn.net/qiqi_77_/article/details/79361413
 //  bettscroll   不能滚动的蛋疼问题
 import BScroll from 'better-scroll'
  import Slider from 'base/slider/slider'
 import Scroll from 'base/scroll/scroll'
 // 加载中组件
 import Loading from 'base/loading/loading'
 //  getDiscList获取 专辑列表
 // getRecommend是jsonp请求数据的，getDiscList是ajax获取数据的
 import {getRecommend, getDiscList} from 'api/recommend'
  import {ERR_OK} from 'api/config'
  export default {
    name: 'Recommend',
    data() {
      return {
        swiperOptionimg: {
          pagination: '.swiper-pagination',
          //  循环轮播。。注意不是定时轮播，是循环轮播
          loop: true
        },
        recommends: [],
        discList: []
      }
    },
    created() {
      // jsonp
      this._getRecommend()
      // axios
      let this_=this;
      //  模拟懒加载效果
      setTimeout(
        function () {
          // document.addEventListener('touchmove', this_._preventDefault, { passive: false });
          this_._getDiscList()
        }
        ,500)
    },
    components: {
      Slider,
      Loading,
      Scroll
    },
    mounted () {
      let this_=this;
      this_.scroll = new BScroll(this_.$refs.wrapperlistcity,{mouseWheel: true, click: true, tap: true })
      console.log('this_.$refs.wrapperlistcity',this_.$refs.wrapperlistcity)
      this_.scroll.refresh()

      //
    },
    methods: {
      _getRecommend() {
        getRecommend().then((res) => {
          console.log('jsonp-res-getRecommend',res)
          if (res.code === ERR_OK) {
            this.recommends = res.data.slider
          }
        })
      },
      _getDiscList() {
        getDiscList().then((res) => {
          console.log('axios-res-getDiscList',res)
          if (res.code === ERR_OK) {
            this.discList = res.data.list
          }
        })
      },
      loadImage() {
        if (!this.checkloaded) {
          this.checkloaded = true
        }
      },
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .recommend
    position: relative
    width: 100%
    height: 100%
    top: 0
    bottom: 0
    .recommend2
      position:relative
      top :0
      left 0
      z-index 10
      width: 100%
      height:600px
      overflow: hidden
    .recommend-content
      width: 100%
      overflow: hidden
      .slider-wrapper
        position: relative
        width: 100%
        /*  高度设置为0，才不会发生明显的挤压现象，设置内边距的时候 */
        height :0
        overflow: hidden
        box-sizing :border-box
        padding-bottom :40%
        .swipe-img
        /*  设置图片的宽度百分百  */
          width :100%
      .recommend-list
        .list-title
          height: 65px
          line-height: 65px
          text-align: center
          font-size: $font-size-medium
          color: $color-theme
        .item
          /*  对每一个行进行布局，歌曲列表 */
          display: flex
          box-sizing: border-box
          flex-direction: row
          /* flex-direction默认是 row 当不写的时候 */
          /*  侧轴居中对齐，也就是垂直居中对齐，元素对齐侧轴中点 */
          align-items: center
          padding: 0 20px 20px 20px
          .icon
            flex: 0 0 60px
            width: 60px
            padding-right: 20px
          .text
            display: flex
            /* flex布局，文本布局还是弹性布局，纵向排列， */
            flex-direction: column
            /*  主轴向下，元素对齐主轴中点 */
            /*justify-content: center*/
            align-items: flex-start
            /*align-items: center*/
            /* 文本占据剩余空间 */
            flex: 1
            line-height: 20px
            overflow: hidden
            font-size: $font-size-medium
            .name
              margin-bottom: 10px
              color: $color-text
            .desc
              color: $color-text-d
              text-align left
              text-indent .5rem
      .loading-container
        position: relative
        width: 100%
        top: 50%
        transform: translateY(-50%)
</style>
